<template>
  <el-card class="list-page">
    <div class="list-h">
      <div class="add-option"></div>
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="formSearch"
        ref="formRef"
      >
        <el-form-item label="审批事项" prop="billName">
          <el-input
            clearable
            class="width-custom120"
            v-model="formSearch.billName"
          ></el-input>
        </el-form-item>

        <el-form-item label="业务类别" prop="busCategoryCode">
          <el-select
            v-model="formSearch.busCategoryCode"
            filterable
            clearable
            class="width-custom160"
          >
            <el-option
              v-for="item in busCateList"
              :key="item.dicCode"
              :label="item.dicValue"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创建人" prop="createUserNameLike">
          <el-input
            v-model.trim="formSearch.createUserNameLike"
            clearable
            class="width-custom120"
          ></el-input>
        </el-form-item>

        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            class="width-custom220"
            v-model="createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="handleChangeDate"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            @click="handleSearch"
            v-auth="`/approval/todo--query`"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>

        <el-table-column type="index" label="序号" width="50">
          <template v-slot="scope">
            <span>{{
              (formSearch.pageNum - 1) * formSearch.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="billName" label="审批事项"> </el-table-column>
        <el-table-column prop="busCategoryName" label="业务类别">
        </el-table-column>
        <el-table-column prop="createUser" label="提交人"> </el-table-column>
        <el-table-column prop="curHandleTime" label="到达时间" width="160">
        </el-table-column>
        <el-table-column label="当前环节">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.nodeStatusName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="当前处理人">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.curHandleUserName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(row)"
              v-auth="`/approval/todo--edit`"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="formSearch.pageNum"
        v-model:limit="formSearch.pageSize"
        @pagination="handleSearch"
      />
    </el-skeleton>
  </el-card>
</template>

<script lang="ts">
import { reactive, ref, defineComponent, watch } from "vue";
import { useRouter } from "vue-router";
import { useCommonStoreStoreHook } from "/@/store/modules/common";
import { postBills } from "/@/api/approval";
import { Base64 } from "js-base64";
export default defineComponent({
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let formSearch = reactive({
      billName: "",
      busCategoryCode: "",
      createUserNameLike: "",
      createTimeStrStart: "",
      createTimeStrEnd: "",
      flowStatus: "5",
      pageSize: 10,
      pageNum: 1,
      instanceId: ""
    });
    const router = useRouter();
    // const route = useRoute();
    let URL = window.location.href;
    let createTime = ref("");
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    let total = ref<number>(0);
    let busCateList = ref([]);
    const getBussCateList = async () => {
      busCateList.value = await useCommonStoreStoreHook().getBusCategory();
    };
    const getTableData = async (obj: Object = {}) => {
      loading.value = true;
      const { code, data } = await postBills(Object.assign(formSearch, obj));
      loading.value = false;
      if (code === 200) {
        tableData.value = data.list;
        total.value = data.rows;
        if (URL.indexOf("runLinkParam") != -1) {
          if (data.list.length > 0) {
            handleDetail(data.list[0]);
          } else {
            // window.location.href = URL.split("?")[0];
            // URL = window.location.href;
            // formSearch.instanceId = "";
            // getTableData();
          }
        }
      }
    };

    const handleChangeDate = time => {
      formSearch.createTimeStrStart = time[0];
      formSearch.createTimeStrEnd = time[1];
    };

    const handleReset = (): void => {
      formRef.value.resetFields();
      formSearch.createTimeStrStart = "";
      formSearch.createTimeStrEnd = "";
      createTime.value = "";
    };

    const handleSearch = () => {
      getTableData(formSearch);
    };

    const handleDetail = row => {
      let pathUrl = "/approval/detail";
      let pathQuery = {
        flowType: row.billType,
        id: row.flowBaseId,
        flowId: row.flowId,
        instanceId: row.instanceId,
        nodeId: row.nodeId.toUpperCase() || row.nodeStatusCode || "ACT_010",
        preNodeId: row.preNodeId.toUpperCase(),
        billName: row.billName,
        busCategoryName: row.busCategoryName,
        busCategoryCode: row.busCategoryCode,
        projectManageId: row.projectManageId,
        mode: "approval",
        isSkipLx: row.isSkipLx
      };
      router.push({
        path: pathUrl,
        query: pathQuery
      });

      // if (billType && ["5", "6"].includes(billType)) {
      //   pathUrl = "/projectsA/acceptance/concealed/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     flowMinType: billType,
      //     contractId: flowBaseId
      //   });
      // } else if (billType && ["7", "8"].includes(billType)) {
      //   pathUrl = "/projectsA/acceptance/completed/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     flowMinType: billType,
      //     contractId: flowBaseId
      //   });
      // } else if (billType && ["9", "10"].includes(billType)) {
      //   pathUrl = "/projectsA/acceptance/material/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     flowMinType: billType,
      //     contractId: flowBaseId
      //   });
      // } else if (billType && ["11", "15"].includes(billType)) {
      //   pathUrl = "/projectsA/quality/inspection/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     flowMinType: billType,
      //     contractId: flowBaseId
      //   });
      // } else if (
      //   billType &&
      //   ["1001", "1002", "1003", "1004"].includes(billType)
      // ) {
      //   pathUrl = "/approval/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     mode: "add",
      //     taskId: row.taskId,
      //     contractId: flowBaseId,
      //     flowType: row.billType
      //   });
      // } else if (billType && ["1016", "1017"].includes(billType)) {
      //   pathUrl = "/approval/detail";
      //   pathQuery = Object.assign(pathQuery, {
      //     mode: "add",
      //     taskId: row.taskId,
      //     contractId: flowBaseId,
      //     flowType: row.billType,
      //     billName:row.billName,
      //     module: "material"
      //   });
      // } else if (billType && ["1015"].includes(billType)) {
      //   pathUrl = "/approval/construction";
      //   pathQuery = Object.assign(pathQuery, {
      //     mode: "add",
      //     taskId: row.taskId,
      //     contractId: flowBaseId,
      //     billName:row.billName,
      //     flowType: row.billType
      //   });
      // }
    };
    // const getQueryString = name => {
    //   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    //   var r = window.location.href.substr(1).match(reg);
    //   if (r != null) {
    //     return unescape(r[2]);
    //   }

    //   return null;
    // };

    if (URL.indexOf("runLinkParam") != -1) {
      // let a = 'eyJiaWxsTmFtZSI6IuS4k+WIqS3mvZjmtpvkuJPliKkxMTMwLeWuoeaJuea1geeoiyIsImluc3RhbmNlSWQiOiI0NTI3MyIsInN5c1R5cGUiOiJyZG1zIiwiYmlsbFR5cGUiOiIyMDI5IiwiaXNUb2RvIjoiMCIsImZsb3dCYXNlSWQiOjUxLCJub2RlU3RhdHVzQ29kZSI6IkFDVF8wMTEifQ=='
      let params = JSON.parse(Base64.decode(URL.split("runLinkParam")[1]));
      // params = JSON.parse(Base64.decode(a));
      console.log("params", params);
      formSearch.instanceId = params.instanceId;
    }
    watch(
      () => router.currentRoute.value.path,
      (to, from) => {
        // 在路由变化时执行的逻辑
        console.log("路由发生变化：", to, from);
        if (!from) {
          console.log("审批详细返回到代办");
          if (URL.indexOf("runLinkParam") != -1) {
            // console.log(URL.split("?")[0])
            window.location.href = URL.split("?")[0];
            // URL = window.location.href;
            // formSearch.instanceId = "";
            // getTableData();
          }
        }
      },
      { immediate: true, deep: true }
    );

    getTableData(formSearch);
    getBussCateList();

    return {
      formRef,
      formSearch,
      loading,
      total,
      tableData,
      handleReset,
      handleSearch,
      handleDetail,
      busCateList,
      handleChangeDate,
      createTime
    };
  }
});
</script>

<style lang="scss" scoped></style>
